<%@ page language="java" contentType="text/html; charset=utf-8"
    pageEncoding="utf-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Insert title here</title>
<script type="text/javascript" src="common/component/jquery/jquery-1.7.1.js"></script>
<script type="text/javascript" src="common/component/word/word.js"></script>
<style type="text/css">

	html {
		overflow: hidden;
	}

	body {
		margin: 0;
		text-align: center;
		background-color: orange;
	}
	
	.word {
		position:absolute;
		width: 40px;
		height: 50px;
		font-family: "Comic Sans MS";
		font-size: 38px; 
		color: white;
		cursor: pointer;
		padding-left: 15px;
		display: inline-block;
		margin-left: 2px;
		margin-top: 2px;
		border: 1px solid black;
		-webkit-transition: left 1s linear,top 1s linear;
	}
	
	.inputBox {
		width: 65px;
		height: 57px;
		border: 5px solid gray;
		display: inline-block;
		-webkit-border-radius: 15px;
		text-align: center;
		padding: 5px;
		margin-left: 10px;
		-webkit-box-shadow: 0px 0px 5px 5px white;
		-webkit-transition: -webkit-box-shadow 1s linear;
	}
	
	#deleteBox {
		display: inline-block;
		width: 500px;
		height: 140px;
		font-family: "Comic Sans MS";
		font-size: 80px; 
		background-color: white;
		-webkit-border-radius: 15px;
		-webkit-box-shadow: 0px 0px 5px 5px white;
		padding-top:10px;
	}
	
	#msg {
		z-index: 1000000;
		top: -200px;
		width:200px;
		height:130px;
		position:absolute;
		background-color: black;
		font-family: "Comic Sans MS";
		font-size: 60px; 
		color: red;
		padding-top:20px;
		-webkit-border-bottom-right-radius: 15px;
		-webkit-border-bottom-left-radius: 15px;
		-webkit-box-shadow: 0px 0px 5px 5px red;
	}
	
	@-webkit-keyframes mymsg {
		0% {
			top: -200px;
		}
		50% {
			top: 0px;
		}
		60% {
			top: -80px;
		}
		70% {
			top: -25px;
		}
		80% {
			top: -5px;
		}
		100% {
			top: 0px;
		}
	}

</style>
</head>
<body>

	<div id="main" style="margin-top:50px;">
	
		<div id="inputBoxList" style="position:relative;top:220px;opacity:0;-webkit-transition: opacity 1s ease-in-out;">
			<div id="key1" class="inputBox" ondrop="drop(event)" ondragover="allowDrop(event)" ondragleave="changeBoxShadow(event)"></div>
			<div id="key2" class="inputBox" ondrop="drop(event)" ondragover="allowDrop(event)" ondragleave="changeBoxShadow(event)"></div>
			<div id="key3" class="inputBox" ondrop="drop(event)" ondragover="allowDrop(event)" ondragleave="changeBoxShadow(event)"></div>
			<div id="key4" class="inputBox" ondrop="drop(event)" ondragover="allowDrop(event)" ondragleave="changeBoxShadow(event)"></div>
			<div id="key5" class="inputBox" ondrop="drop(event)" ondragover="allowDrop(event)" ondragleave="changeBoxShadow(event)"></div>
			<div id="key6" class="inputBox" ondrop="drop(event)" ondragover="allowDrop(event)" ondragleave="changeBoxShadow(event)"></div>
		</div>
		
		<div id="deleteBox" style="position:relative;top:250px;opacity:0;-webkit-transition: opacity 1s ease-in-out;" ondragover="allowDrop(event)" ondrop="drop(event)">Recycle Bin</div>
		
		<div id="msg"></div>
		
		<!-- <input id="test" type="button" onclick="test();"/> -->
	</div>
	
</body>
<script type="text/javascript">
	
	var words = ["A", "B", "C", "D", "E", "F", "G", "H", "I", "J", "K", "L", "M", "N", "O", "P", "Q", "R", "S", "T", "U", "V", "W", "X", "Y", "Z", "1", "2", "3", "4", "5", "6", "7", "8", "9", "0"];
	var colors = ["black", "white"];
	var wordList = [];
	var locations = [];
	var startX = ($(document).width() - 700) / 2;
	
	$(document).ready(function(){

		$("#msg").css("left", ($(document).width() - 200) / 2);
		
		initLocations();
		initPage();
		
	});
	
	function randomWords() {
		$.each(words, function(inx,obj){
			var randomInx = parseInt(Math.random() * 30 + 5);
			var tempWord = words[randomInx];
			words[randomInx] = words[inx];
			words[inx] = tempWord;
		});
	}
	
	function initPage() {
		randomWords();
		var rowInx = 1;
		$.each(words, function(inx,obj){
			if(inx == 12 || inx == 24) {
				rowInx++;
			}
			var bgColorInx = parseInt(1 + Math.random() * 10 / 5);
			var fontColorInx = bgColorInx == 1 ? 1 : 0;
			$("body").append("<div class='word' id='" + obj + "' style='background-color:" + colors[bgColorInx - 1] + ";color:" + colors[fontColorInx] + ";left:" + locations[inx].x + "px;top:" + locations[inx].y + "px;' draggable='true' ondragstart='drag(event)'>" + obj + "</div>");
			var word = new Word();
			word.init($("#" + obj), locations[inx].x, locations[inx].y, startX + (inx - (rowInx - 1)*12) * 60, rowInx * 55);
			wordList[inx] = word;
		});
	}
	
	var cartoon = setInterval(function(){
		$.each(wordList, function(inx, obj) {
			obj.toTarget();
		});
		$("#inputBoxList").css("opacity", "1");
		$("#deleteBox").css("opacity", "1");
		clearInterval(cartoon);
	},1000);
	
	function allowDrop(ev) {
		if(ev.target.innerHTML == "") {
			$(ev.target).css("-webkit-box-shadow", "0px 0px 5px 5px black");
		}
		ev.preventDefault();
	}

	function drag(ev) {
		ev.dataTransfer.setData("Text",ev.target.id);
	}

	function changeBoxShadow(ev) {
		if(ev.target.innerHTML == "") {
			$(ev.target).css("-webkit-box-shadow", "0px 0px 5px 5px white");
		}
	}
	
	function drop(ev) {
		ev.preventDefault();
		var data=ev.dataTransfer.getData("Text");
		if(ev.target.innerHTML == "") {
			$(ev.target).css("-webkit-box-shadow", "0px 0px 5px 5px green");
			ev.target.appendChild(document.getElementById(data));
			document.getElementById(data).style.position = "relative";
			document.getElementById(data).style.left = "0px";
			document.getElementById(data).style.top = "0px";
		} else if(ev.target.innerHTML == "Recycle Bin") {
			$("#" + document.getElementById(data).parentNode.id).css("-webkit-box-shadow", "0px 0px 5px 5px white");
			$.each(wordList, function(inx, obj) {
				if($(obj.sObj).attr("id") == data) {
					$("body").append(document.getElementById(data));
					document.getElementById(data).style.position = "absolute";
					document.getElementById(data).style.left = obj.targetLocation.x + "px";
					document.getElementById(data).style.top = obj.targetLocation.y + "px";
				}
			});
		}
		checkKey();
	}
	
	function showMsg(msg) {
		$("#msg").html(msg);
		$("#msg").css("-webkit-animation-name", "mymsg");
		$("#msg").css("-webkit-animation-duration", "0.2s");
		$("#msg").css("-webkit-animation-timing-function", "linear");
		$("#msg").css("top", "0px");
		var hideInterval = setInterval(function(){
			$("#msg").css("top", "-200px");
			$("#msg").css("-webkit-animation-name", "");
			$("#msg").css("-webkit-animation-duration", "");
			$("#msg").css("-webkit-animation-timing-function", "");
			clearInterval(hideInterval);
		},2000);
	}
	
	function checkKey() {
		var inputText = "";
		for(var i = 1; i < 7; i++) {
			var innerHtml = $("#key" + i).html();
			var text = innerHtml.substring(innerHtml.indexOf("id=") + 4, innerHtml.indexOf("id=") + 5);
			inputText += text;
		}
		if(inputText.length == 6 && inputText != "DOUBLE") {
			var isWrong = false;
			for(var i = 1; i < 7; i++) {
				$("#key" + i).css("-webkit-box-shadow", "0px 0px 5px 5px red");
				isWrong = true;
			}
			if(isWrong) {
				showMsg("Error");
			}
		} else if(inputText.length == 6 && inputText == "DOUBLE") {
			window.location = "schedule/schedule.jsp";
		}
	}
	
	function initLocations() {
		locations[0] = {x:50,y:-100};
		locations[1] = {x:80,y:-120};
		locations[2] = {x:130,y:-150};
		locations[3] = {x:250,y:-250};
		locations[4] = {x:400,y:-300};
		locations[5] = {x:600,y:-150};
		locations[6] = {x:750,y:-600};
		locations[7] = {x:1100,y:-300};
		locations[8] = {x:1200,y:-400};
		locations[9] = {x:1500,y:100};
		locations[10] = {x:1800,y:300};
		locations[11] = {x:2000,y:400};
		locations[12] = {x:2300,y:100};
		locations[13] = {x:2450,y:500};
		locations[14] = {x:2650,y:200};
		locations[15] = {x:2800,y:350};
		locations[16] = {x:3000,y:600};
		locations[17] = {x:50,y:800};
		locations[18] = {x:80,y:900};
		locations[19] = {x:130,y:1100};
		locations[20] = {x:250,y:1250};
		locations[21] = {x:400,y:1300};
		locations[22] = {x:600,y:1350};
		locations[23] = {x:750,y:1450};
		locations[24] = {x:1100,y:1150};
		locations[25] = {x:1200,y:1350};
		locations[26] = {x:1500,y:950};
		locations[27] = {x:-50,y:-100};
		locations[28] = {x:-100,y:100};
		locations[29] = {x:-300,y:120};
		locations[30] = {x:-200,y:350};
		locations[31] = {x:-250,y:110};
		locations[32] = {x:-100,y:200};
		locations[33] = {x:-150,y:500};
		locations[34] = {x:-400,y:600};
		locations[35] = {x:-380,y:300};
	}
	
</script>
</html>